Rodrigo

Mhh, yeah that error looks odd, basically the pipeline can't find the file you're using for installing GSAP and I assume the file is in your repo, so basically this boils down to the instruction being given to the pipeline. Have you contacted GitLab support so they can guide you a bit regarding this? I think that with the tgz file and this particular error they would be able to help you better than we. As Cassie mentions if you can share some information or allow access to your repo until this is solved that would be great. Happy Tweening!

Hi, That is to be expected as far as I can tell. Keep in mind that GSAP is interpolating the RGB numeric values for the colors (inspect with devtools), so as those values are being updated, the color is going to gradually change based on those three values. Is just the nature of how colors work based on those values, not really a GSAP problem per se. Hopefully this clear things up. Happy Tweening!

Hi, Maybe you're looking for something like this: https://codepen.io/GreenSock/pen/pomvabo Happy Tweening!

Hi, Blake's demos are not the simplest ones to follow and modify/enhance. There is a lot of code there and honestly I don't have time to dig into it and check where to look for. Maybe you can point us where to look exactly in order to check what could be the problem and how to solve it. Happy Tweening!

Hi, Those warnings normally are in dev mode, is always a good idea to create a production build and test that locally and see what you get there. Normally you shouldn't get or care about warnings when registering the plugins inside an if statement checking for the window object: if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Also registering plugins is just a way to avoid tree shaking, nothing more, which is resolved on the build process not when the user gets to the production app. I can't really see how that could create a SEO problem TBH. Happy Tweening!

Hi, This looks odd to me: function scrollToSection(el) { if (process.client) { nextTick(() => { $gsap.to(".main-sections-container", { duration: 1, scrollTo: { y: el }, }); }); } } Why you have the GSAP instance inside the NextTick callback? The NextTick callback is only needed when you have to wait for a DOM update to be completed after a reactive property or prop is updated and if that property/prop actually has an effect on the DOM of course. That doesn't seem to be the case in your demo. If possible please create a demo in Stackblitz: https://stackblitz.com/ Is clear that there is an endless loop running there, unfortunately I'm on my laptop right now and can't edit your sandbox here for some reason I can't really figure, so I'll try again tomorrow morning. In the mean time get rid of the nextTick method and just use the gsap.to() method directly. Finally the package you're using to abstract GSAP is using an outdated version of GSAP: "node_modules/@hypernym/nuxt-gsap": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/@hypernym/nuxt-gsap/-/nuxt-gsap-2.4.2.tgz", "integrity": "sha512-Oep+0ABn58PbJo4tX8A8ja2hGjjBtyFE7DJAF/q8DIDGXMFaZlTbvcreCmMdKhuJ5NR8ODE0fEObUEYci901gg==", "dev": true, "dependencies": { "gsap": "^3.12.2" }, "funding": { "url": "https://github.com/sponsors/ivodolenc" } }, Right now we're on version 3.12.5, so maybe that could factor into this. We understand that using this package simplifies things, but honestly I don't see what's the issue with importing and registering the plugins in different files, Is this considered a bad practice? Is this just annoying? I have not problem with that TBH, but that's just me 🤷‍♂️ Hopefully this helps Happy Tweening!

Hi, You shouldn't have different GSAP instances inside the MatchMedia instance and another outside, both should be inside the MatchMedia instance. MatchMedia basically checks the screen width and the breakpoints you pass and reverts the instances based on that. Check this demo in order to see how MatchMedia inside useGSAP works: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx Hopefully this helps Happy Tweening!

Hi @nextwebd and welcome to the GSAP Forums! I'm not 100% clear on what you're trying to achieve here. Maybe this tutorial (check the demo and video) by @Carl could help: https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/ Hopefully this helps, if not please be more specific about the issue you're having and what you're trying to achieve. Happy Tweening!

Hi, That boils down to the easing of the animation, once again use the horizontal seamless loop for this, you can use the toIndex method that exposes: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Once again use the seamless loop helper function That is a bit more complicated, you'd have to give the animation the same duration of the audio file. Once again, that can be achieved with the toIndex method exposed by the horizontal loop helper function. Check the demos we have in the helper function page in order to experiment how it works and how that can be achieved. Finally I would recommend you to create the helper function after all the images have loaded to prevent issues. Hopefully this helps. Happy Tweening!

Hi, Basically there is an issue in the math you were using to set the scroll distance you're passing to the ScrollTo Plugin. This seems to work the way you intend: https://codepen.io/GreenSock/pen/WNqeEap Hopefully this helps. Happy Tweening!

Hi, As far as I know there isn't a support for canvas because SplitText does a bunch of DOM related calculations and operations. What you could try is to create a DOM element, use SplitText on it get the result from it and add that to a canvas element (letter by letter or word by word using a loop) and then delete the DOM element to remove it from the DOM. As far as I can tell there aren't any plans for SplitText on canvas for the future, but I don't have the final say in this though. Happy Tweening!

Hi @Divyanshu_patil and welcome to the GSAP Forums! What are the steps to reproduce this? I'm trying the debug view (no iframes) without any issues: https://cdpn.io/pen/debug/NWxNEwY Finally keep in mind that this demo was made in order to create an immediate snap to a new section, so when you go through more than one a jump back should be expected since GSAP will honor the toggle state update of each ScrollTrigger instance. What you could try is using the fastScrollEnd feature: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#fastScrollEnd Hopefully this helps. Happy Tweening!

Hi, This most likely stems from the fact that you're using position: sticky in your cards. Why not just let ScrollTrigger handle that with pinning and pinSpacing false: https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pin https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#pinSpacing Here are a couple of simple demos: https://codepen.io/GreenSock/pen/bGZKWjp https://codepen.io/GreenSock/pen/poBRQRj Finally you could have a look at this guide @mvaneijgen wrote on the subject: Hopefully this helps. Happy Tweening!

Sorry but without a minimal demo that clearly illustrates the issue, there is nothing we can do. A screenshot of your code doesn't tells us anything unfortunately 🤷‍♂️

Hi @displaynameee and welcome to the GSAP Forums! First I have no idea what a CS2 case animation is to begin with. Second, if you want to create a horizontal loop with images, I'd recommend our Horizontal Loop helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Finally, codepen can't run Nuxt, for creating Nuxt demos we recommend using Stackblitz. You can fork one of our starter templates if you want, or you can login for free on stackblitz and create a demo from scratch, just remember to keep the demo as small as possible: https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters Happy Tweening!